import React from 'react'
import '../style/shop.css'
import { Card } from 'antd-mobile'
import { useEffect } from 'react';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom'
import axios from '../../utils/http'

export default function shop() {
    const navigate = useNavigate()
    const handleId = (id) => {
        navigate(`/shopping/${id}`)
    }

    const [list, setList] = useState([])

    const getMerchant = async () => {
        const res = await axios.get('/yjr/merchant')
        if (res.code == 200) {
            setList(res.merchant)
        }
    }

    useEffect(() => {
        getMerchant()
    }, [])
    return (
        <div className='card-box'>
            {
                list.map(item => {
                    return (
                        <Card key={item._id} className='card' title={item.store} onClick={() => handleId(item._id)}>
                            {item.detailAddr}
                        </Card>
                    )
                })
            }

        </div>
    )
}
